<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>电影列表</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    .movie-list {
      max-width: 1200px;
      margin: 0 auto;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .movie-item {
      padding: 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .movie-item:last-child {
      border-bottom: none;
    }
    .movie-id {
      color: #666;
      width: 150px;
    }
    .movie-name {
      font-weight: bold;
      flex-grow: 1;
      padding: 0 20px;
    }
    .movie-score {
      color: #ff5722;
      font-weight: bold;
      width: 80px;
      text-align: center;
    }
    .header {
      background-color: #333;
      color: white;
      font-weight: bold;
    }
    .loading {
      text-align: center;
      padding: 50px;
      color: #666;
    }
    .error {
      text-align: center;
      padding: 50px;
      color: #f44336;
    }
  </style>
</head>
<body>
  <h1>猫眼电影列表</h1>
  <div class="movie-list" id="movieContainer">
    <div class="loading">加载中...</div>
  </div>

  <script>
    // 向服务器请求电影数据
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:8081/movies', true);
    
    xhr.onload = function() {
      const container = document.getElementById('movieContainer');
      
      if (xhr.status === 200) {
        try {
          const movies = JSON.parse(xhr.responseText);
          
          // 清空加载提示
          container.innerHTML = '';
          
          // 添加表头
          const header = document.createElement('div');
          header.className = 'movie-item header';
          header.innerHTML = `
            <div class="movie-id">电影ID</div>
            <div class="movie-name">电影名称</div>
            <div class="movie-score">评分</div>
          `;
          container.appendChild(header);
          
          // 添加电影数据
          movies.forEach(movie => {
            const item = document.createElement('div');
            item.className = 'movie-item';
            item.innerHTML = `
              <div class="movie-id">${movie.id}</div>
              <div class="movie-name">${movie.name}</div>
              <div class="movie-score">${movie.score}</div>
            `;
            container.appendChild(item);
          });
        } catch (e) {
          container.innerHTML = `<div class="error">数据解析错误: ${e.message}</div>`;
        }
      } else {
        container.innerHTML = `<div class="error">获取数据失败，状态码: ${xhr.status}</div>`;
      }
    };
    
    xhr.onerror = function() {
      document.getElementById('movieContainer').innerHTML = 
        '<div class="error">网络错误，无法获取数据</div>';
    };
    
    xhr.send();
  </script>
</body>
</html>
